<template>
  <a-modal
    :title="title"
    :maskClosable="false"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @cancel="handleCancel"
    :visible="visible"
    @ok="handleSubmit"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">
    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入手机号码" v-decorator.trim="[ 'username', validatorRules.username]" :readOnly="!!model.id" :disabled="!!model.id"/>
        </a-form-item>

<!--        <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--          <a-input placeholder="请输入手机号码" :disabled="isDisabledAuth('user:form:phone')" v-decorator="[ 'phone', validatorRules.phone]" />-->
<!--        </a-form-item>-->

        <a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input placeholder="请输入用户姓名" v-decorator.trim="[ 'realname', validatorRules.realname]" />
        </a-form-item>


        <template v-if="!model.id">
          <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            <a-input type="password" placeholder="请输入登录密码" v-decorator="[ 'password', validatorRules.password]" />
          </a-form-item>

          <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
          </a-form-item>
        </template>
<!--        <a-form-item label="企微二维码" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--          <j-image-upload class="avatar-uploader" text="上传" v-model="fileList" ></j-image-upload>-->
<!--        </a-form-item>-->

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="企微二维码">
          <a-upload
            listType="picture-card"
            class="logo-uploader"
            :showUploadList="false"
            :action="uploadAction"
            :data="{'isup':1,'dir':'dining'}"
            :headers="headers"
            :beforeUpload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="picUrl" :src="getPicView()" alt="logo" style="height:104px;max-width:300px"/>
            <div v-else>
              <a-icon :type="uploadLoading ? 'loading' : 'plus'"/>
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" >
          <a-select
            style="width: 100%"
            placeholder="请选择用户角色"
            optionFilterProp = "children"
            v-model="selectedRole"
            :getPopupContainer= "(target) => target.parentNode">
            <a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()" :value="role.id">
              {{ role.roleName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="岗位" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" >
          <a-select
            v-decorator.trim="[ 'title', validatorRules.title]"
            style="width: 100%"
            placeholder="请选择岗位"
            optionFilterProp = "children"
            v-model="userTitle"
            :getPopupContainer= "(target) => target.parentNode">
            <a-select-option v-for="(role,roleindex) in jselectMultiple.options" :key="roleindex.toString()" :value="role.value">
              {{ role.text }}
            </a-select-option>
          </a-select>
        </a-form-item>


        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="门店权限">
          <a-button type="primary" icon="search" @click="handleShowStore">选择门店</a-button>
          <a-select
            mode="multiple"
            :placeholder="'请选择门店'"
            v-model="selectStoreValue"
            :options="selectStoreOptions"
            allowClear
            :disabled="false"
            :open="false"
            style="width: 100%;"
            @click.native="visible=true"
          />
          <select-store-modal ref="SelectStoreModal" @selectFinished="selectStoreOK"/>
        </a-form-item>
        <a-form-item v-if="false" label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag  v-decorator="['activitiSync', {}]" placeholder="请选择是否同步工作流引擎" :type="'radio'" :triggerChange="true" dictCode="activiti_sync"/>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import moment from 'moment'
  import Vue from 'vue'
  // 引入搜索部门弹出框的组件
  import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction } from '@/api/manage'
  import {addUser,addUserV2,editUser,editUserV2,queryUserRole,queryallV2 } from '@/api/api'
  import { disabledAuthFilter } from "@/utils/authFilter"
  import {duplicateCheck } from '@/api/api'
  import JImageUpload from '../../../components/jeecg/JImageUpload'
  import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
  import SelectStoreModal from '../../stm/modules/SelectStoreModal'

  export default {
    name: "UserModal",
    components: {
      SelectStoreModal,
      JImageUpload,
      JSelectPosition,
      JMultiSelectTag
    },
    data () {
      return {
        userTitle: '',
        formDataAll:"",
        recordsAll:[],
        selectStoreValue: [],
        selectStoreOptions: [],
        roleDisabled: false, //是否是角色维护调用该页面
        modalWidth:800,
        drawerWidth:700,
        modaltoggleFlag:true,
        confirmDirty: false,
        checkedDepartKeys:[],
        checkedDepartNameString:"", // 保存部门的名称 =>title
        resultDepartOptions:[],
        userId:"", //保存用户id
        disableSubmit:false,
        userDepartModel:{userId:'',departIdList:[]}, // 保存SysUserDepart的用户部门中间表数据需要的对象
        dateFormat:"YYYY-MM-DD",
        validatorRules:{
          password:{
            rules: [{
              required: true,
              pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
              message: '密码由8位数字、大小写字母和特殊符号组成!'
            }, {
              validator: this.validateToNextPassword,
            }],
          },
          confirmpassword:{
            rules: [{
              required: true, message: '请重新输入登录密码!',
            }, {
              validator: this.compareToFirstPassword,
            }],
          },
          title:{rules: [{ required: true, message: '请选择岗位!' }]},
          realname:{rules: [{ required: true, message: '请输入用户名称!' }]},
          partnerId:{rules: [{ required: true, message: '请选择商家!' }]},
          roles:{},
          phone:{rules: [{required: true, validator: this.validatePhone}]},
          username:{rules: [{required: true, validator: this.validatePhone}]},
        },
        departIdShow:false,
        departIds:[], //负责部门id
        title:"操作",
        visible: false,
        model: {},
        roleList:[],
        selectedRole:[],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        uploadLoading:false,
        confirmLoading: false,
        headers:{},
        form:this.$form.createForm(this),
        picUrl: "",
        url: {
          list: "/sys/userV2/list",
          // fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
          fileUpload: window._CONFIG['domianURL'] + '/sys/common/ossUpload',
          imgerver: window._CONFIG['domianURL'] + '/sys/common/view',
          userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
          userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
          syncUserByUserName:"/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
        },
        identity:"1",
        fileList:[],
        jselectMultiple: {
          options: [
            { text: '店员', value: '店员' },
            { text: '店长', value: '店长' },
            { text: '店铺经理', value: '店铺经理' },
          ],
          value: 'Integer,Boolean'
        },
      }
    },
    created () {
      this.userTitle = ''
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}

    },
    computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      handlePartnerIds(value) {
        console.log(value);
        this.model.partnerIds = value;
      },
      isDisabledAuth(code){
        return disabledAuthFilter(code);
      },
      //窗口最大化切换
      toggleScreen(){
        if(this.modaltoggleFlag){
          this.modalWidth = window.innerWidth;
        }else{
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      initialRoleList(){
        queryallV2().then((res)=>{
          if(res.success){
            this.roleList = res.result;
          }else{
            console.log(res.message);
          }
        });
      },
      loadUserRoles(userid){
        // 这里是查角色的,需要调试
        // queryUserRole({userid:userid}).then((res)=>{
        //   if(res.success){
        //     console.log('uuu2');
        //     console.log(res.result);
        //     this.selectedRole = res.result;
        //   }else{
        //     console.log(res.message);
        //   }
        // });
        // this.getStore();
        let that = this
        getAction(this.url.list,{id:that.userId}).then(res=>{
          if (res.success) {
            console.log('111->');
            console.log(res.result.records);
          }else{
            console.log(res.message);
          }
        });

      },
      refresh () {
        this.checkedDepartKeys=[];
        this.checkedDepartNameString = "";
        this.userId="";
        this.resultDepartOptions=[];
        this.departId=[];
        this.departIdShow=false;
      },
      add () {
        this.picUrl = "";
        this.refresh();
        this.edit({activitiSync:'1'});
      },
      edit (record) {
      console.log(record);
        this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
        let that = this;
        that.initialRoleList();
        that.checkedDepartNameString = "";
        that.form.resetFields();
        if(record.hasOwnProperty("id")){
          that.loadUserRoles(record.id);
          setTimeout(() => {
            // this.fileList = record.qrCode;

          }, 5)
        }
        that.userId = record.id;
        that.visible = true;
        that.model = Object.assign({}, record);
        console.log('model->');
        console.log(this.model);
        if(this.model.partnerId === null  || this.model.partnerId === '' || this.model.partnerId === undefined){
          this.model.partnerId = '';
        } else {
          this.model.partnerId = this.model.partnerId.toString();
        }
        this.selectedRole =  this.model.roleName
        this.userTitle =  this.model.title
        console.log(this.model);


        // 调用list接口拿到门店的参数
        this.getStore()

        that.$nextTick(() => {
          that.form.setFieldsValue(pick(this.model,'username','roleName','partnerIds','realname','title','activitiSync','selectStoreValue','phone','qrCode'))
        });
        //身份为上级显示负责部门，否则不显示
        // if(this.model.userIdentity=="2"){
        //   this.identity="2";
        //   this.departIdShow=true;
        // }else{
        //   this.identity="1";
        //   this.departIdShow=false;
        // }
        // 调用查询用户对应的部门信息的方法
        that.checkedDepartKeys = [];
      },
      //
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.selectedRole = [];
        this.userDepartModel = {userId:'',departIdList:[]};
        this.checkedDepartNameString='';
        this.checkedDepartKeys = [];
        this.resultDepartOptions=[];
        this.departIds=[];
        this.departIdShow=false;
        this.identity="1";
        this.fileList=[];
      },
      getPicView(){
        let formData = this.formDataAll
        if(formData.qrCode !== null && formData.qrCode !== undefined && formData.qrCode !== ''){
          if('http' === formData.qrCode.substring(0,4)){
            console.log('444');
            return formData.qrCode;
          }
          return this.url.imgerver +"/"+ formData.qrCode;
        }
      },
      moment,
      handleSubmit () {

        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            if(!values.birthday){
              values.birthday = '';
            }else{
              values.birthday = values.birthday.format(this.dateFormat);
            }
            let formData = Object.assign(this.model, values);
            this.formDataAll = formData
            if(that.fileList != ''){
              // formData.qrCode = that.fileList;
            }else{
              // formData.qrCode = null;
            }
            // formData.departRoleId = this.selectedRole.length>0?this.selectedRole.join(","):'';
            formData.departRoleId = this.selectedRole.length>0?this.selectedRole:'';
            formData.userId = this.userId
            formData.title = this.userTitle
            let obj;
            if(!this.model.id){
              formData.userId = this.userId;
              console.log('formData123');
              console.log(formData);
              obj=addUserV2(formData);
            }else{
              obj=editUserV2(formData);
            }
            formData.storeIds = this.selectStoreValue.toString()
            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.userDepartModel.departIdList = {userId:'',departIdList:[]};
              that.close();
            })

          }
        })
      },
      handleCancel () {
        this.close()
      },
      validateToNextPassword  (rule, value, callback) {
        const form = this.form;
        const confirmpassword=form.getFieldValue('confirmpassword');

        if (value && confirmpassword && value !== confirmpassword) {
          callback('两次输入的密码不一样！');
        }
        if (value && this.confirmDirty) {
          form.validateFields(['confirm'], { force: true })
        }
        callback();
      },
      compareToFirstPassword  (rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue('password')) {
          callback('两次输入的密码不一样！');
        } else {
          callback()
        }
      },
      validatePhone(rule, value, callback){
        if(!value){
          callback()
        }else{
          //update-begin--Author:kangxiaolin  Date:20190826 for：[05] 手机号不支持199号码段--------------------
          if(new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)){
            //update-end--Author:kangxiaolin  Date:20190826 for：[05] 手机号不支持199号码段--------------------

            var params = {
              tableName: 'sys_user',
              fieldName: 'phone',
              fieldVal: value,
              dataId: this.userId
            };
            duplicateCheck(params).then((res) => {
              if (res.success) {
                callback()
              } else {
                callback("手机号已存在!")
              }
            })
          }else{
            callback("请输入正确格式的手机号码!");
          }
        }
      },
      validateUsername(rule, value, callback){
        var params = {
          tableName: 'sys_user',
          fieldName: 'username',
          fieldVal: value,
          dataId: this.userId
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
          callback()
        } else {
          callback("用户名已存在!")
        }
      })
      },
      validateWorkNo(rule, value, callback){
        var params = {
          tableName: 'sys_user',
          fieldName: 'work_no',
          fieldVal: value,
          dataId: this.userId
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("工号已存在!")
          }
        })
      },
      handleConfirmBlur  (e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value
      },

      normFile  (e) {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
          return e
        }
        return e && e.fileList
      },
      beforeUpload: function(file){
        var fileType = file.type;
        if(fileType.indexOf('image')<0){
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      handleChange (info) {
        this.picUrl = "";
        if (info.file.status === 'uploading') {
          this.uploadLoading = true;
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          if(response.success){
            this.model.qrCode = response.message;
            // formData.qrCode = response.message;
            this.picUrl = response.message;
          }else{
            this.$message.warning(response.message);
          }
        }
      },
      // 搜索用户对应的部门API
      onSearch(){
        if(this.model.partnerIds ==null || this.model.partnerIds =='' && this.model.partnerIds == undefined){
          this.$message.warning("请先选择对应是商户");
        }
      },

      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize(){
        let screenWidth = document.body.clientWidth;
        if(screenWidth < 500){
          this.drawerWidth = screenWidth;
        }else{
          this.drawerWidth = 700;
        }
      },
      handleStoreFlag (e) {
        console.log('e1->',e);
        console.log('e2->',e);
      },
      getStore(){
        let that = this
        getAction(this.url.list,{id:that.userId}).then(res=>{
          if (res.success) {
            this.recordsAll =res.result.records;
              // 选择门店
            this.selectStoreValue = res.result.records.map(data =>data['roleMap'])[0].storeInfoList.map(data => data['storeId']);
            this.selectStoreOptions = res.result.records.map(data =>data['roleMap'])[0].storeInfoList.map(data => ({ label: data['name'], value: data['storeId'] }));
            console.log('门店key：',this.selectStoreValue);
            console.log('门店vaule：',this.selectStoreOptions);

            // 角色
            console.log('角色->');
            this.selectedRole = res.result.records[0].roleMap.role.id
          }else{
            console.log(res.message);
          }
        });
      },
      handleShowStore: function () {
        this.$refs.SelectStoreModal.add();
        this.$refs.SelectStoreModal.title = "选择门店";
      },
      selectStoreOK(storeData) {
        console.log('storeData => ' + storeData);
        this.selectStoreOptions = storeData.map(data => ({ label: data['name'], value: data['storeId'] }));
        this.selectStoreValue = storeData.map(data => data['storeId']);
        console.log('selectStoreOptions => ' + this.selectStoreOptions);
        console.log('selectStoreValue => ' + this.selectStoreValue);
      },
    }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
